<template>
  <view>
    <!-- 轮播图区域 -->
    <swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
      :autoplay="true" interval="3000" duration="500">
      <swiper-item v-for="(item,index) in swiperList" :key="index">
        <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
        <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
          v-if="item.type=='video'"></video>
      </swiper-item>
    </swiper> 
    <!-- 三大 服务区域 -->
    <view class="errand-box">
      <view class="errand-left">
        <!-- 代取送服务区域 -->
        <view class="errand-buy">
          <image class="errand-buy-pic" src="../../static/icon-3service/buy.png" mode=""></image>
          <button class="cu-btn round text-xxl errand-text line-yellow shadow" @click="goToBuyAgent">代购</button>
          <!-- <view class="text-xxl errand-text">代购</view> -->
          <view class="text-df errand-text">美食/奶茶/花束</view>
          
        </view>
      </view>
      <view class="errand-right">
        <!-- 代取送 -->
        <view class="errand-pick-send-all-purpose-gang">
          <image src="../../static/icon-3service/pick_send.png" class=".errand-pic"></image>
          <view class="errand-pick-send-title">
            <button class="cu-btn round text-xl line-yellow shadow" @click="goToPickAndSend">代取送</button>
            <!-- <view class="text-xxl">代取送</view> -->
            <view class="text-df">快递/外卖</view>
          </view>
        </view>
        <!-- 万能帮 -->
        <view class="errand-pick-send-all-purpose-gang">
          <image src="../../static/icon-3service/all-help.png" class=".errand-pic"></image>
          <view class="errand-pick-send-title">
            <button class="cu-btn round text-xl line-yellow shadow" @click="goToAllPurposeGang">万能帮</button>
            <view class="text-df">代办/租借</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "home",
    data() {
      return {
        swiperList: [{
          id: 0,
          type: 'image',
          url: 'https://mp-8cee3ddd-8bba-44f8-bd49-93f17bd9d819.cdn.bspapp.com/swiper-img/sw1.png'
        }, {
          id: 1,
          type: 'image',
          url: 'https://mp-8cee3ddd-8bba-44f8-bd49-93f17bd9d819.cdn.bspapp.com/swiper-img/sw2.png',
        }, {
          id: 2,
          type: 'image',
          url: 'https://mp-8cee3ddd-8bba-44f8-bd49-93f17bd9d819.cdn.bspapp.com/swiper-img/sw3.png'
        }, ],
        dotStyle: true,
        
      };
    },
    methods:{
      //跳转代购页面
      goToBuyAgent(){
        uni.navigateTo({
          url:'/subpkg/buy-agent/buy-agent'
        })
      },
      //跳转帮取送页面
      goToPickAndSend(){
        uni.navigateTo({
          url:'/subpkg/pick-send/pick-send'
        })
      },
      //跳转万能帮详情页
      goToAllPurposeGang(){
        uni.navigateTo({
          url:'/subpkg/all-purpose-gang/all-purpose-gang'
        })
      },
    }
  }
</script>

<style lang="scss">
  .screen-swiper {
    height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;

    &::after {
      content: ' ';
      display: block;
      position: absolute;
      width: 100%;
      height: 50px;
      left: 0;
      bottom: 0;
      background-color: #efefef;
      border-radius: 100%;
      transform: translateY(50%);
    }
  }

  .errand-box {
    height: 400rpx;
    border-radius: 50px;
    margin: 0 10px;
    display: flex;
    justify-content: space-around;

    .errand-left {
      width: 48%;
      background-color: white;
      border-radius: 20px;

      .errand-buy {
        margin: 20px auto;
        width: 130px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .errand-buy-pic {
          margin-bottom: 10px;
          width: 70px;
          height: 70px;
        }

        .errand-text {
          margin-bottom: 10px;
        }
      }
    }

    .errand-right {
      width: 48%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .errand-pick-send-all-purpose-gang {
        height: 48%;
        background-color: white;
        border-radius: 20px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        .errand-pick-send-title {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
      }
    
      .errand-pic {
        width: 60px;
        height: 60px;
      }
    }
  }
</style>